<template>
    <div class="wrap">
        <div class="container">
            <!-- 面包屑 -->
            <div class="products_block ">
                <div class="nav_position">
                    <span class="icon_home"></span>您的位置：
                    <div class="position_detail">
                        <a href="">首页</a>
                        <span class="el-icon-arrow-right"></span>
                        <span>产品采购</span>
                    </div>
                </div>
            </div>

            <div class="products_xq">
                <div class="cpxx">
                  <!--产品切换 begin-->
                  <div class="pro_qiehuan">
                    <div class="swiper-container gallery-thumbs">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <img src="@/assets/images/gutou.png" /></div>
                        <div class="swiper-slide">
                          <img src="@/assets/images/lgg.png" /></div>
                        <div class="swiper-slide">
                          <img src="@/assets/images/product1.png" /></div>
                        <div class="swiper-slide">
                          <img src="@/assets/images/gutou.png" /></div>
                      </div>
                    </div>
                    <!-- Swiper -->
                    <div class="swiper-container gallery-top">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <img src="@/assets/images/gutou.png" /></div>
                        <div class="swiper-slide">
                          <img src="@/assets/images/lgg.png" /></div>
                        <div class="swiper-slide">
                          <img src="@/assets/images/product1.png" /></div>
                        <div class="swiper-slide">
                          <img src="@/assets/images/gutou.png" /></div>
                      </div>
                      <!-- Add Arrows --></div>
                  </div>
                  <!--产品切换 end-->
                    <!--产品描述-->
                    <div class="cpms">
                        <div class="title">同种异体肌腱
                            <span class="price">230.00</span>
                        </div>
                        <div class="desc">多种产品规格满足临床不同需求多种产品规格满足临床不同需求多种产品规格满足临床不同需求多种产品规格满足临床不同需求多种产品规格满足临床不同需求</div>
                        <div class="bhxh">
                            <span>编号：</span>150680431530
                        </div>
                        <div class="bhxh">
                            <span>型号：</span>xh001
                        </div>
                        <div class="bhxh guige">
                            <span>规格：</span>
                            <a class="active">200x20x5mm</a>
                            <a>200x20x5mm</a>
                            <a>200x20x5mm</a>
                        </div>
                        <div class="bhxh">
                            <span>数量：</span>
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                        </div>
                        <div class="bhxh">
                            <span>备注：</span>多种产品规格满足临床不同需求
                        </div>
                        <div class="xqgwc">
                            <li class="active">
                                <a href="./car.html">加入购物车</a></li>
                            <li>
                                <a class="caigou">立即购买</a></li>
                        </div>
                    </div>
                </div>
                <!--产品描述-->
                <!--产品详情-->
                <div class="cpxqms">
                    <div class="cpxiangt">产品详情</div>
                    <div class="cpxqcontent">
                        <img src="@/assets/images/cpxq.png" />
                    </div>
                </div>
                <!--产品详情-->
            </div>
            <!-- 相关产品 -->
            <div class="productxg_content">
                <div class="productxg_title">相关产品</div>
                <div class="productxg_view">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <div class="developlist swiper-container ">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧在线客服 -->
        <div class="floatRight">
            <div class="Onlinecpdz_Box" @click="dialogDzVisible = true">
                <div class="Onlinecpdz_dz">
                    <a class="dizhi">产品
                    <br/>定制</a>
                </div>
            </div>
            <div class="Onlineypsq_Box" @click="dialogSqVisible = true">
                <div class="Onlineypsq_sq">
                    <a class="shiyong">样品
                    <br/>申请</a>
                </div>
            </div>
            <OnlineService></OnlineService>
        </div>
        <!-- 右侧在线客服 结束 -->

        <!-- 产品定制弹出框 -->
        <el-dialog
            title="产品定制"
            :visible.sync="dialogDzVisible"
            width="42%"
            top="2%">
            <div class="dialog-content dz_content">
                <el-form ref="form" :model="form" label-width="25%" label-position="left">
                    <el-form-item label="产品名称" required>
                        <el-select v-model="form.name" placeholder="请选择或输入产品名称">
                            <el-option label="名称" value="shanghai"></el-option>
                            <el-option label="名称二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品型号">
                        <el-input v-model="form.type" placeholder="选择产品后对应生成"></el-input>
                    </el-form-item>
                    <el-form-item label="产品规格" required>
                        <el-select v-model="form.specification" placeholder="请选择或输入产品规格">
                            <el-option label="名称" value="shanghai"></el-option>
                            <el-option label="名称二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产企业" required>
                        <el-select v-model="form.company" placeholder="请选择生产企业">
                            <el-option label="企业名称" value="shanghai"></el-option>
                            <el-option label="企业名称二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品备注">
                        <el-input type="textarea" v-model="form.remark" placeholder="请填写产品定制要求及备注"></el-input>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="产品价格">
                        <el-input v-model="form.price" placeholder="请输入产品价格"></el-input>
                    </el-form-item>
                    <el-form-item label="附件">
                        <div class="flex align-center">
                            <el-upload
                                class="uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus uploader-icon"></i>
                            </el-upload>
                            <span class="file-format">支持txt、doc、xls、jpg格式， 文件大小不超过5MB</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.info" placeholder="请填写备注信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit">定制提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!-- 产品定制弹出框结束 -->

        <!-- 样品、试用品申请 -->
        <el-dialog
            title="样品、试用品申请"
            :visible.sync="dialogSqVisible"
            width="42%"
            top="2%">
            <div class="dialog-content">
                <el-form ref="form" :model="form" label-width="25%" label-position="left">
                    <el-form-item label="申请类型" required>
                        <el-select v-model="form.type" placeholder="请选择申请类型">
                            <el-option label="名称" value="shanghai"></el-option>
                            <el-option label="名称二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品名称" required>
                        <el-select v-model="form.name" placeholder="请选择或输入产品规格">
                            <el-option label="名称" value="shanghai"></el-option>
                            <el-option label="名称二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品型号">
                        <el-input v-model="form.modelNumber" placeholder="选择产品后对应生成"></el-input>
                    </el-form-item>
                    <el-form-item label="生产企业" required>
                        <el-select v-model="form.company" placeholder="请选择生产企业">
                            <el-option label="企业名称" value="shanghai"></el-option>
                            <el-option label="企业名称二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品规格" required>
                        <el-select v-model="form.specification" placeholder="请选择或输入产品规格">
                            <el-option label="名称" value="shanghai"></el-option>
                            <el-option label="名称二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品备注">
                        <el-input type="textarea" v-model="form.remark" placeholder="请填写产品定制要求及备注"></el-input>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字" ></el-input-number>
                    </el-form-item>

                    <el-form-item label="收货地址" required>
                        <el-select v-model="form.sheng" placeholder="省/直辖市" class="sheng">
                            <el-option label="省/直辖市" value=""></el-option>
                            <el-option label="陕西" value=""></el-option>
                        </el-select>
                        <el-select v-model="form.shi" placeholder="市" class="shi">
                            <el-option label="市" value=""></el-option>
                            <el-option label="西安" value=""></el-option>
                        </el-select>
                        <el-select v-model="form.qu" placeholder="区/县" class="qu">
                            <el-option label="区/县" value=""></el-option>
                            <el-option label="雁塔区" value=""></el-option>
                        </el-select>
                        <el-select v-model="form.jie" placeholder="乡镇/街道" class="jie">
                            <el-option label="乡镇/街道" value=""></el-option>
                            <el-option label="街道" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址" required>
                        <el-input v-model="form.address" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="onSubmit">提交申请</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!-- 样品、试用品申请 -->
    </div>
</template>

<script>
    export default {
        name: "",
        components: {
            
        },
        data() {
            return {
                dialogDzVisible: false,
                dialogSqVisible: false,
                form: {

                },
                num: 1,
                imageUrl: ''
            };
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            onSubmit() {

            },
        },
        created(){
            
            
        },
        mounted: function(){

            //    / *内页产品详情页的产品图片切换*/
            var galleryTop = new Swiper('.pro_qiehuan .gallery-top', {
                nextButton: '.pro_qiehuan  .swiper-button-next',
                prevButton: '.pro_qiehuan  .swiper-button-prev',
                spaceBetween: 0,
            });
            var galleryThumbs = new Swiper('.pro_qiehuan  .gallery-thumbs', {
                spaceBetween: 10,
                centeredSlides: true,
                slidesPerView: 'auto',
                touchRatio: 0.2,
                slideToClickedSlide: true
            });
            galleryTop.params.control = galleryThumbs;
            galleryThumbs.params.control = galleryTop;


            var devepswiper = new Swiper('.developlist', {
                observer: true,
                observeParents: true,
                autoplay: 3500,
                slidesPerView: 4,
                spaceBetween: 40,
                prevButton: '.productxg_view .swiper-button-prev',
                nextButton: '.productxg_view .swiper-button-next',
                breakpoints: {
                    768 : {
                    slidesPerView: 1,
                    spaceBetween: 0,
                    autoHeight: true,
                    },
                    1024 : {
                    slidesPerView: 2,
                    spaceBetween: 20,
                    },
                }
            });


        }
    };
</script>
